<template>
  <div class="app-container">
    <el-container class="h-full">
      <el-header class="header">
        <el-menu
          mode="horizontal"
          :default-active="$route.path"
          :router="true"
          class="menu"
        >
          <el-menu-item disabled class="title">
            three.js代码展示
          </el-menu-item>
          <el-menu-item index="/solar-system">
            太阳+地月模型
          </el-menu-item>
          <el-menu-item index="/car-road">
            SUV行驶道路
          </el-menu-item>
          <el-menu-item index="/earth-point-cloud">
            地球点云可视化
          </el-menu-item>
          <el-menu-item index="/house-model">
            3D房产模型
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';

const $route = useRoute();
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #fff;
  color: #333;
  overflow: hidden;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ffffff;
  border-bottom: 1px solid #333;
  padding: 0;
}

.menu {
  background-color: transparent;
  border: none;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.main-content {
  padding: 0;
  flex: 1;
  overflow: hidden;
}
</style>
